<template>
<div id="level" class="bg-assist">
	<sub-page-header title="会员等级" class="linear-gradient header"></sub-page-header>
	<div class="user linear-gradient">
		<img :src="user.avatar" class="avatar">
		<h4>{{user.nickname}}</h4>
		<div class="clearfix">
			<p class="col-6"><i :class="'iconfont icon-'+userLevel.icon" :style="{color:userLevel.icon_color}"></i> {{userLevel.name}}</p>
			<p class="col-6">积分: {{user.credits}}</p>	
		</div>
	</div>
	<div class="level-box white-box">
		<p v-if="nextLevel.name" class="title">充值 {{nextLevel.credits}} 积分 可升级为 <i :class="'iconfont icon-'+ nextLevel.icon" :style="{color: nextLevel.icon_color}"></i>{{nextLevel.name}}</p>
		<div class="container-fluid" style="padding-top: 10px;">
			<p>
				<input type="number" class="recharge-input" placeholder="输入充值金额"></input>
				<button class="btn btn-normal">立即充值</button>
			</p>	
		</div>
		<p class="title">升级列表</p>
		<ul class="levels clearfix">
			<li v-for="item in levels" :key="item.id">
				<div class="pull-left"><i :class="'iconfont icon-'+item.icon" :style="{color: item.icon_color}"></i> {{item.name}}</div>
				<div class="pull-right">
				<span>充值 <span class="text-price">{{item.credits}}</span> 积分</span>
				折扣：{{item.discount == 1 ? '无' : item.discount*10 + '折'}}</div>
			</li>
		</ul>	
	</div>
	<div class="bottom-margin"></div>
</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader.vue';
import api from '~/api/api.js';
export default {
	components: {
		SubPageHeader
	},
	data () {
		return {
			user: {},
			userLevel: {},
			levels: []
		};
	},
	computed: {
		nextLevel () {
			let nextLevel = {};
			this.levels.forEach(item => {
				if (this.userLevel.level+1 == item.level) {
					nextLevel = item;
				}
			});
			return nextLevel;
		}
	},
	created () {
		api.get('/user/levels')
		.then(response => {
			this.user = response.data.user;
			this.userLevel = response.data.userLevel;
			this.levels = response.data.levels;
		})
		.catch(error => {
			this.$message.error(error.err);
		});
	}
}
</script>

<style scoped>
#sub-page-header.header {
	border-bottom: none;
}
.linear-gradient {
    background: -webkit-linear-gradient(left, #c8182b , #d54025);
    background: -o-linear-gradient(right, #c8182b, #d54025);
    background: -moz-linear-gradient(right, #c8182b, #d54025);
    background: linear-gradient(to right, #c8182b , #d54025);
    color: #fff;
}
.white-box {
	padding-top: 10;
	padding-bottom: 10px;
	background: #fff;
	margin-bottom: 15px;
}

.user {
	text-align: center;
    padding-top: 15px;	
}

.user .avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
}

.level-box .title{
	padding: 10px;
	border-bottom: 1px solid #eaeaea;
}

.level-box .levels li{
	overflow: hidden;
	padding: 10px;
	border-bottom: 1px solid #eaeaea;
}

.recharge-input {
	line-height: 34px;
	font-size: 14px;
}

.col-6 {
	width:49.9%;
	float: left;
}
</style>